<template>
  <div class="keyboard-container">
    <!-- 键盘主体 -->
    <div class="keyboard">
      <!-- 第一行字母 -->
      <div class="keyboard-row">
        <button
          v-for="(key, index) in firstRow"
          :key="index"
          @click="handleKeyClick(key)"
        >
          {{ isUpperCase ? key.toUpperCase() : key }}
        </button>
      </div>

      <!-- 第二行字母 -->
      <div class="keyboard-row">
        <button
          v-for="(key, index) in secondRow"
          :key="index"
          @click="handleKeyClick(key)"
        >
          {{ isUpperCase ? key.toUpperCase() : key }}
        </button>
      </div>

      <!-- 第三行字母 + 功能键 -->
      <div class="keyboard-row">
        <button
          v-for="(key, index) in thirdRow"
          :key="index"
          @click="handleKeyClick(key)"
          :class="{
            'function-key': ['A/a', 'Back'].includes(key),
            'delete-key': key === 'Back'
          }"
        >
          {{ key === 'Back' ? '' : key }} <!-- 删除键不显示文字 -->
        </button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isUpperCase: false, // 大小写状态
      firstRow: ['q', 'w', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p'], // 第一行字母
      secondRow: ['a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l'], // 第二行字母
      thirdRow: ['A/a', 'z', 'x', 'c', 'v', 'b', 'n', 'm', 'Back'], // 第三行字母 + 功能键
    };
  },
  methods: {
    handleKeyClick(key) {
      switch (key) {
        case 'A/a': // 大小写切换
          this.isUpperCase = !this.isUpperCase;
          break;
        case 'Back': // 删除功能
          this.$emit('input', 'Back'); // 发送删除事件
          break;
        default: // 字母输入
          const value = this.isUpperCase ? key.toUpperCase() : key;
          this.$emit('input', value); // 发送输入事件
      }
    },
  },
};
</script>

<style scoped lang="scss">
.keyboard-container {
  width: 100%;
  /* background: #f5f5f5; */
  border-radius: 5px;
  /* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); */
  /* padding: 5px; */
  /* box-sizing: border-box; */
}

.keyboard {
  display: flex;
  flex-direction: column;
  gap: 15px; /* 行间距 */
}

.keyboard-row {
  display: flex;
  justify-content: center;
  gap: 5px; /* 按钮间距 */
}

button {
  width: 103px; /* 按钮宽度 */
  height: 98px; /* 按钮高度 */
  border: 1px solid #ccc;
  border-radius: 10px;
  background: white;
  /* font-size: 16px; */
  cursor: pointer;
  transition: all 0.2s;
  font-size: 48px;
color: #333333;
}

button:hover {
  // background: #e0e0e0;
}

button:active {
  // transform: scale(0.95);
}

.function-key {
  // background: #d3d3d3;
}
.delete-key {
  width: 240px; /* 删除键宽度 */
   @include background('design/key-del', center, center);
  background-position: center center; /* 图标居中 */
  background-repeat: no-repeat; /* 不重复 */
  background-size: contain; /* 图标适应按钮 */
}
</style>